
<template class="cityClass">
<div>
    <div class="city-picker-div"  id="myPanel">
      <div @click="coloseCity">
        <span class="placeholder" v-if="valueProvince==''">请选择省/市/区</span>
        <span class="placeholder" v-else>
                                       <span @click.stop.prevent="goFn('0')">{{valueProvince}}</span>
                                       <span @click.stop.prevent="goFn('1')">{{valueCity?"/"+valueCity:''}}</span>
                                       <span @click.stop.prevent="goFn('2')">{{valueCounty?"/"+valueCounty:''}}</span>
      </span>
      <span class="select-item" data-count="province" data-code="110000"></span>
      <div class="arrow" :class="panelShow?'open':''" ></div>
      </div>

    <el-tabs v-model="activeName" type="card" class="cityTabs" v-if="panelShow">

    <el-tab-pane label="省份" name="first">
                       <span v-for="(item,index) in province" :key="index" @click="changeCity('0',item,index)" :class="item==valueProvince?'colorClass':''" class="spanClass">
                                {{item}}
                       </span>
    </el-tab-pane>

    <el-tab-pane label="城市" name="second">
                       <span v-for="(item,index) in city" :key="index" @click="changeCity('1',item,index)" :class="item==valueCity?'colorClass':''" class="spanClass">
                                {{item}}
                       </span>
    </el-tab-pane>

    <el-tab-pane label="县区" name="third">
                       <span v-for="(item,index) in county" :key="index" @click="changeCity('2',item,index)" :class="item==valueCounty?'colorClass':''" class="spanClass">
                                {{item}}
                       </span>
    </el-tab-pane>

  </el-tabs>

    </div>
  </div>
</template>



<script>
import citiesJson from '@api/common/publicCity.js'
export default {
  components: {
  
  },
  data() {
    return {                                      //json数据不存在层级感,只能自己手动去切割数据,麻烦的一批
         panelShow:false,
         activeName:"first",
         valueProvince:"",  //选中省文字
         valueProvinceCode:"",  //选中省code
         valueCounty:"",  //选中县文字
         valueCountyCode:"",  //选县code
         valueCity:"",      //选中市文字
         valueCityCode:"", //选中市code
         city:[],        //市渲染的文字数组
         cityCode:[],    //市渲染的code数组
         county:[],      //县渲染文字数组
         countyCode:[],  //县渲染code数组
         province:[],    //省渲染文字数组
         provinceCode:[],//省渲染code数组
         currentCityCode:"", 
         currentCountyCode:"",
         currentThirdCode:""         //最后选中的地区的code
    }
  },
  props:{
        cityCodeDefault:{             //通过cityCOde来默认定义城市
          type:String,
          default:"442000"
        }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
        
  },
  // 监控data中的数据变化
  watch: {
    cityCodeDefault(newval){
      this.cityCodeDefault=newval
    }
 },
  methods: {
       changeCity(value,item,index,Flag){
         if(value==='0'){
              this.valueProvince=item
              if(!Flag)this.valueCity=""
              if(!Flag)this.valueCounty=""
              this.activeName="second"
              this.county=[]
              this.currentThirdCode=this.provinceCode[index]    //当前选中的省code
              this.currentCityCode="0,"+this.provinceCode[index]      //拼接成市区的keys,用户获取市区的内容
              this.cityCode=Object.keys(citiesJson[this.currentCityCode])  //市里面的code代码
              this.city=Object.values(citiesJson[this.currentCityCode])              //市区里面的文字代码
         }
         if(value==='1'){
              this.valueCity=item
              if(!Flag) this.valueCounty=""
              this.activeName="third"
              this.currentThirdCode=this.cityCode[index]    //当前选中的市区code
              this.currentCountyCode=this.currentCityCode+','+this.cityCode[index]      //拼接成县城的keys,用户获取县城的内容
              this.countyCode=Object.keys(citiesJson[this.currentCountyCode])         //县里面的code代码
              this.county=Object.values(citiesJson[this.currentCountyCode])            //县区里面的文字代码
         }if(value==='2'){
              this.currentThirdCode=this.countyCode[index]    //当前选中的县区code
              this.valueCounty=item
         }
       },
       goFn(value){
                this.panelShow=true
                if(value==='0') this.activeName="first"
                if(value==='1') this.activeName="second"
                if(value==='2') this.activeName="third"
       },
       coloseCity(){
                let taht=this
                if(this.panelShow) setTimeout(() => {
                     taht.panelShow=false
                }, 10);
       },
       init(){
             this.province=Object.values(citiesJson["0"])     //省份文字
             this.provinceCode=Object.keys(citiesJson["0"])   //省份code
       },
       getErx(value){                //判断是省,还是市,还是区
              let length=value.length
              let shift02=value.substr(0,2)  //0-2索引
              let shift04=value.substr(0,4)  //2-4索引
              let inverse2=value.substr(-2)  //最后两位
              let inverse4=value.substr(-4)  //最后四位

              if(inverse4=="0000"){  //直接就是定为省
                  this.valueProvince=citiesJson["0"][value]  //省的名称
              }else if(inverse2=='00'){  //代表是市
                  let codeProvince=shift02+'0000'  //省的code标码
                  let codeCity="0,"+codeProvince   //市的code代码
                  this.valueProvince=citiesJson["0"][codeProvince]  //省名
                  this.valueCity=citiesJson[codeCity][value]  //市名
                  this.changeCity('0',this.valueProvince,this.returnIndex(citiesJson["0"],this.valueProvince),true)
              }else{          //代表是县区
                  let codeProvince=shift02+'0000'  //省的code标码
                  let codeCity="0,"+codeProvince   //市的code代码
                  this.valueProvince=citiesJson["0"][codeProvince]  //省名
                  this.valueCity=citiesJson[codeCity][shift04+'00']  //市名
                  let valueCountyCode="0,"+codeProvince+","+shift04+"00"   //市的code代码
                  this.valueCounty=citiesJson[valueCountyCode][value]  //区县名
                  this.changeCity('0',this.valueProvince,this.returnIndex(citiesJson["0"],this.valueProvince),true)
                  this.changeCity('1',this.valueCity,this.returnIndex(citiesJson[codeCity],this.valueCity),true)
              }
       },
       returnIndex(obj,val){  //返回当前值在当前对象中的索引
                  let array=Object.values(obj)
                  console.log(array.indexOf(val))
                  return array.indexOf(val)
       },
       getCityFn(){
             return{
                 code:this.currentThirdCode,
                 province:this.valueProvince,
                 city:this.valueCity,
                 county:this.valueCounty,
             }
       }

  },
  created() {
          this.init()
          this.getErx(this.cityCodeDefault)
  },
  mounted() {
           document.addEventListener("click",(event)=>{              //全局关闭和打开事件
               let sp = document.getElementById("myPanel");
                if(sp){
                         if(!sp.contains(event.target)){//这句是说如果我们点击到了id为myPanel以外的区域
                            this.panelShow = false;
                         }else{
                            this.panelShow = true;
                         }
           }
           })

  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style>
 .colorClass{
     background: #409EFF !important;
     color: white !important;
   }
 .spanClass{
        cursor: pointer;
        width: 33.33%;
        line-height: 30px;
        display: inline-block;
        text-align: center;
   }
 .spanClass:hover{
       background-color: rgb(241, 248, 255);
       color: rgb(70, 164, 255);
       border-radius: 2px;
   }
  .cityTabs{
     width: 360px;
     text-align: left;
     position: absolute;
     z-index: 999;
     top: 36px;
     background: white;
   }
   .city-picker-div{
    position: relative;
    width: 250px;
    line-height: 35px;
    cursor: pointer;
    border-bottom: 1px solid #409EFF;
    text-align: left;
   }
 .placeholder span:hover{
     color: rgb(70, 164, 255);
   }
 .arrow {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 10px;
    margin-top: -3px;
    height: 5px;
    background: url(../../assets/drop-arrow.png) -10px -25px no-repeat;
  }
   .open{
    background-position: -10px -10px;
}
</style>